
<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="UTF-8"> 
        <title>demo</title>
        <style>
        #div1{
            width: 100px;
            height: 100px;
            margin: 100px auto;    
            /* position: absolute;
            left:100px;
            top: 50px; */
            background-color: red;
        } 
        #div2{
            width: 200px;
            height: 300px;
            position: absolute;
            left:100px;
            top:300px;
            background-color: blue;
        }
        </style>
    </head> 
    <body> 
        <!-- <div id="div3" style="background-color:brown;position:absolute;left:50px;top:50px;width:100px;height:100px"></div> -->
        <div id="div1"></div> 
        <div id="div2"></div> 


        
        <script>
            // function paramsDate (index) {
            //     var beginDate = new Date(new Date().getTime() - (24*60*60*1000)*index);
            //     var y = beginDate.getFullYear()
            //     var m = beginDate.getMonth() + 1
            //     m = m < 10 ? '0' + m : m
            //     var d = beginDate.getDate()
            //     d = d < 10 ? ('0' + d) : d
            //     return y + '-' + m + '-' + d
            // }
            // // var beginDate = new Date(new Date().getTime() - (24*60*60*1000)*0);
            // console.log(paramsDate(4));
            // console.log(paramsDate(0).split('-'));
            // var test = [];
            // test.push(1);
            // test.push(2);
            // console.log(test);
            //var _origin = {x: div1.offsetLeft, y:div1.offsetTop}
            var _newele = document.createElement('div') 
            var div1Style = getComputedStyle(div1)
            var dropFlag = 0, dragFlag = 0 
            div1.addEventListener('mousedown', (event) => {
                var _ele = event.target
                // new一个div元素一直放在原来位置
                _newele.style.width = div1Style.width
                _newele.style.height  = div1Style.height
                _newele.style.backgroundColor = div1Style.backgroundColor
                _newele.style.position = 'absolute'
                _newele.style.left = _ele.offsetLeft + 'px' // offset是相对于最近的祖先定位元素，clientX实际上是event.clientX，是鼠标相对于窗口的X坐标
                _newele.style.top = _ele.offsetTop + 'px'
                _newele.style.zIndex = 1
                // 将被拖动的元素position设置为absolut，设置left和top，因为之后的位置要根据鼠标移动距离来定，所以position必须要absolute才能通过left和top来确定位置
                _ele.style.position = 'absolute'
                _ele.style.left = _newele.style.left
                _ele.style.top = _newele.style.top
                _ele.style.margin = '0'
                _ele.style.opacity = 0.5
                _ele.style.zIndex = 2  // 这里_ele的zindex一定要比_newel的zindex大，否则_ele会被_newele挡住，无法监听拖动事件了。
                document.body.append(_newele)
                dragFlag = 1
            })
            div1.addEventListener('mouseup', (event) => {
                dragFlag = 0
                console.log(dropFlag)
                // 恢复原样，简易版就直接干掉div1，否则应该存储所有的style值，干掉new div,让div1回归原位
                if(!dropFlag){
                    document.body.removeChild(div1)
                } else {
                    console.log('now drop in div2')
                    div2.style.backgroundColor = '#ccc000'
                }
            })

            div1.addEventListener('mousemove',(event) => {
                if(!dragFlag) return false;
                var _ele = event.target
                _ele.style.left = event.clientX  - parseInt(div1Style.width)/2 + 'px' // clientx是当前鼠标相对于浏览器页面的水平坐标，这里减去width/2是估算方式，因为鼠标拖动方块在方块之内，按照鼠标在方块中心计算
                _ele.style.top = event.clientY - parseInt(div1Style.height)/2 + 'px'
                if(isEnter({left: event.clientX, top: event.clientY}, div2)){
                    dropFlag = 1
                    div1.style.cursor = 'copy'
                } else{
                    dropFlag = 0
                    div1.style.cursor = 'move'
                }
            })

            //mouseenter事件直到mouseup事件触发后才触发，不能用mouseenter了,只能用函数判断鼠标坐标是不是在div2元素的范围内了

            function isEnter( point = {left : 0 ,top : 0}, ele ){
                var minLeft = ele.offsetLeft, maxLeft = ele.offsetLeft + ele.offsetWidth
                var minTop = ele.offsetTop, maxTop = ele.offsetTop + ele.offsetHeight
                if( point.left > minLeft && point.left < maxLeft && point.top > minTop && point.top < maxTop){
                    //console.log('enter', ele)
                    return true
                }  
                return false
            }
        </script> 
    </body> 
</html>
 